.QueryComposer {
    width: 100%;
    overflow: hidden;
    padding: 0px 16px 16px;

    .QueryComposer-header {
        height: 48px;
        display: table;

        // for safari
        width: 100%;

        .QueryComposer-header-vertical {
            display: table-cell;
            vertical-align: middle;
        }
        .QueryRunButton .Button {
            margin-right: 0px;
            height: 36px;
        }
    }

    .QueryComposer-content-editor {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;

        .query-editor-wrapper {
            flex: 2;
            overflow-y: auto;
            overflow-x: hidden;
            position: relative;
            border-radius: var(--border-radius-sm);

            .SearchAndReplaceBar {
                position: absolute;
                z-index: 10;
                right: 48px;
            }
        }

        .query-execution-wrapper {
            height: 100%;
            flex: 1;
            overflow-y: scroll;
            background-color: var(--bg-lightest);
            border-radius: var(--border-radius-sm);

            .hide-execution {
                cursor: pointer;
                position: sticky;
                top: 0;
                z-index: 3;
                background-color: inherit;
            }

            .QueryComposerExecution {
                padding: 0px 8px 16px 16px;
                .execution-text {
                    // need this to line up for some reason
                    line-height: 1;
                }
            }
        }
    }
}
